<template>
    <div class="left">
        <h3>淹没分析</h3>
        <button @click="flyTo">水面飞行定位</button>
        <button @click="waterSurface">水面抬升</button>
    </div>
</template>

<script setup>
import { ref, onUnmounted, onMounted } from "vue"
import getMyProjectManager from '@/scripts/getMyProjectManager';
const myProjectManager = getMyProjectManager();
import { ES3DTileset, ESTerrainLayer } from 'esobjs-xe2-plugin/dist-node/esobjs-xe2-plugin-main';
import axios from "axios"

// 水面对象
var geoWater = null

// 时间定时器
var timer = null

// 3dtilset对象
var tileset = null

// 地形数据
var terrain = null

onMounted(() => {
    // 请求水面数据
    axios.get("./data/waterData.json").then((res) => {
        geoWater = createESGeoWater(res.data)
    })
    create3Dtileset()
    createESTerrainLayer()
})

// 添加地形
const createESTerrainLayer = () => {
    terrain = myProjectManager.createSceneObject(ESTerrainLayer);
    if (!terrain) return;
    terrain.url = 'http://192.168.0.20:9003/terrain/s2Za0GeG/layer.json';

}
// 创建3dtilsert数据
const create3Dtileset = () => {
    tileset = myProjectManager.createSceneObject(ES3DTileset);
    if (!tileset) return;
    tileset.url = 'http://192.168.0.20:9003/model/KxGceNMK/tileset.json';
}

/**
 * 根据点位创建水面
 * @param {*} points 
 */
const createESGeoWater = (points) => {
    var sceneObj = myProjectManager.createSceneObject('ESGeoWater')
    sceneObj.baseWaterColor = [
        0.29411764705882354,
        0.4549019607843137,
        0.8117647058823529,
        1
    ]
    sceneObj.frequency = 10000
    sceneObj.points = points
    sceneObj.waterType = "lake"
    sceneObj.flyTo()
    return sceneObj
}

// 飞行定位
const flyTo = () => {
    if (!geoWater) return
    geoWater.flyTo()
}

// 水面抬升
const waterSurface = () => {
    let n = 0
    timer = setInterval(() => {
        if (n > 20) clearInterval(timer)
        geoWater.points = geoWater.points.map(item => {
            return [item[0], item[1], item[2] + 1]
        })
        n = n + 1
    }, 1000)
}

// 销毁所有对象
const destroySceneObject = () => {
    if (geoWater) myProjectManager.destroySceneObject(geoWater)
    if (tileset) myProjectManager.destroySceneObject(tileset)
    if (terrain) myProjectManager.destroySceneObject(terrain)
    if (timer) clearImmediate(timer)
}

onUnmounted(() => {
    destroySceneObject()

})

</script>

<style scoped>
.left {
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background: url(../../assets/left/kuang.png) no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    color: #fff;
}

button {
    width: 150px;
    padding: 10px 0px;
    margin-bottom: 15px;
    border-radius: 5px;
    cursor: pointer;
}

hr {
    width: 90%;
}
</style>